<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="陈嘉乐">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            margin: 0 auto;
            border: 1px solid #aaa;
        }

        h1 {
            margin: 0;
            text-align: center;
            background-color: #aaaaaa;
        }

        span {
            width: 180px;
            height: 150px;
            overflow: hidden;
        }

        ul {
            position: relative;
            width: 180px;
             overflow: hidden; 
             
        }
   
        li {
            position: relative;
            list-style: none;
            width: 180px;
            height: 150px;
             /* overflow: hidden;  */
        }
        .second {
            position: absolute;
            top: 0;
            left: 180px;
            overflow: hidden;
        }
        p {
            width: 180px;
            position: absolute;
            top: 113px;
            text-align: center;
            color: white;
        }

        span>p {
            background-color: #E26D5C;
        }

        .third {
            background-color: #0C4251;
        }

        .four {
            background-color: #176CAF;
        }
spam{
    overflow: hidden;
}
    </style>
</head>

<body>
    <div class="box">
        <h1>专辑特惠</h1>
        <div class="container">
            <ul>
                <li>
            <span>
          <img src="./img/1_1.jpg" alt="">
           <p class="keke">COCON/可可尼</p> 
           </span>
            <span class="second">
           <img src="./img/1_2.jpg" alt="">
           <p class="nini">几何为网-极致绚烂</p>
              </span>
                    <!-- <div class="overflay"></div> -->
                </li>
                <li>
           <span>
          <img src="./img/2_1.jpg" alt="">
           <p class="keke  third">INSUN/恩裳</p> 
           </span>
             <span class="second">
           <img src="./img/2_2.jpg" alt="">
           <p class="nini third">2013印象春</p>
              </span>
                </li>
                <li>
                    <span >
          <img src="./img/3_1.jpg" alt="">
           <p class="keke four">JNBY/江南布衣</p> 
           </span>
                    <span class="second">
           <img src="./img/3_2.jpg" alt="">
           <p class="nini four">NANMENG/南梦</p>
              </span>
                </li>
            </ul>

        </div>
    </div>




    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('li').hover(function () {
        $(this).stop().animate({ left: -220 }, 500);
        // $(this).find('.second').stop().animate({left:40},500);
        $(this).find('.keke').stop().animate({ top: 130 }, 500);
        $(this).find('.nini').stop().animate({ top: 113 }, 500);
    }, function () {
        $(this).stop().animate({ left: 0 }, 500);
        // $(this).find('.second').stop().animate({left:220},500);
        $(this).find('.keke').stop().animate({ top: 113 }, 500);
        $(this).find('.nini').stop().animate({ top: 130 }, 500);
    });

</script>